<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">车辆列表</div>

    <!-- 搜索框 -->
    <el-form ref="form" :model="form" size="small" v-if="0">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item>
            <el-col :span="12">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择开始日期" v-model="form.dateLowerBound" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker type="datetime" @change="dateChangeEndTime" value-format="yyyy-MM-dd" placeholder="选择结束日期" v-model="form.dateUpperBound" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="form.inOutType" placeholder="全部车辆进出类型">
              <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-col>
              <el-select v-model="form.park" placeholder="全部停车场">
                <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-col>
              <el-input placeholder="请输入车牌号" v-model="form.carNum"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜 索</el-button>
            <!--<el-button>重置</el-button>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" stripe border class="el-table-body">
      <el-table-column prop="carOwner" label="车主姓名" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="车主电话" min-width="200" align="center">
      </el-table-column>
      <el-table-column prop="plateNumber" label="车牌号" min-width="200" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="时间" min-width="150" align="center">
      </el-table-column>
    </el-table>

    <el-pagination background @current-change="changeEventTable" :current-page.sync="form.page" :page-size="form.limit" layout="total, prev, pager, next,jumper" :total="totalCount" class="el-page-body">
    </el-pagination>
  </div>
</template>

<script>
import areaSelect from '../../components/common/select/area'
import sceneSelect from '../../components/common/select/scene'

export default {
  name: 'carList',
  components: {
    areaSelect,
    sceneSelect
  },

  data () {
    return {
      gHeight: this.$store.state.gHeight,
      form: {
        inOutType: '', // 车辆进出类型
        carNum: '', // 车牌号
        park: '', // 停车场
        eventID: '', // 事件编号
        areaID: '', // 所属
        modType: '', // 场景类型
        eventState: '', // 处理状态
        subType: '', // 提交类型
        content: '', // 事件内容
        dateLowerBound: '', // 开始时间
        dateUpperBound: '', // 结束时间
        page: 1,
        limit: 10
      },
      totalCount: 0, // 总数
      tableData: [], // 列表数据
      eventStateArr: [],
      subTypeArr: [],
      showList: false,
      imgIsShow: false,
      videoIsShow: false,
      currentImg: '',
      currentVideo: ''
    }
  },

  mounted: function () {
    this.init()
  },

  methods: {
    // 监测结束时间
    dateChangeEndTime () {
      let startTime = this.timeToStamp(this.form.dateLowerBound)
      let endTime = this.timeToStamp(this.form.dateUpperBound)
      if (startTime > endTime) {
        this.$message({
          type: 'warning',
          message: '结束时间必须小于开始时间！'
        })
        this.form.dateUpperBound = ''
      }
    },
    // 日期转时间戳
    timeToStamp (time) {
      let d = new Date(time)
      let stamp = d.getTime()
      return stamp
    },
    // 页面初始方法
    init () {
      this.refreshTable()
    },
    onSubmit () {
      this.form.page = 1
      this.refreshTable()
    },
    // 提交类型转换成文字
    submitTypeToText: function (row) {
      return this.$base.getNameByConst('select', 'submitType', row.submitType)
    },
    // 处理状态转换成文字
    eventStateToText: function (row) {
      return this.$base.getNameByConst('select', 'eventState', row.eventState)
    },
    // 切换页码
    changeEventTable: function (val) {
      this.form.page = val
      this.refreshTable()
    },
    // 拉取表格信息
    refreshTable: function () {
      let _this = this
      let url = this.$base.getUrl('bizcarinfoList')
      let params = {
        isJson: true,
        url: url,
        data: {
          carOwner: '',
          mobile: '',
          plateNumber: '',
          page: this.form.page,
          limit: this.form.limit
        }
      }
      this.$store.dispatch('postForm', params).then((res) => {
        let data = res.result
        if (data.list) {
          _this.tableData = data.list
        } else {
          _this.tableData = []
        }
        _this.totalCount = data.totalCount
      })
    }
  }
}
</script>

<style scoped>
.el-table {
  width: auto !important;
  text-align: center;
  margin: 10px;
}

.el-table >>> th {
  text-align: center;
}

.el-pagination {
  margin: 0 10px;
}
svg {
  display: block;
  margin: auto;
}
</style>

<style lang="less" scoped>
.list {
  /deep/ .el-card {
    width: 23%;
    margin: 10px 10px;
    .image {
      padding: 14px;
    }
  }
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .type-list {
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      line-height: 26px;
      width: 48%;
      .label {
        display: inline-block;
        width: 50px;
        text-align: center;
      }
      span {
        color: #7c8696;
      }
    }
  }
}
</style>
